import React, { Component } from 'react'
import {nanoid} from 'nanoid';
import {connect} from 'react-redux';
import {createAddPersonAction} from '../../redux/actions/person';
class Proson extends Component {
    userName = React.createRef()
    userAge = React.createRef()
    addPerson = () =>{
        const name = this.userName.current.value
        const age =  this.userAge.current.value
        const person = {
            id:nanoid(),
            name: name,
            age:age
        }
        this.props.addPersonRedux(person)
    }
    render() {
        return (
            <div>
                <input ref={this.userName} type="text" placeholder="输入名字"/>
                <input ref={this.userAge} type="text" placeholder="输入年龄"/>
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {this.props.persons.map((person,index) => <li key={index}>{person.name}--{person.age}</li>)}
                </ul>
            </div>
        )
    }
}
export default connect(
    state => ({
        persons:state.personData
    }),
    {
        addPersonRedux : createAddPersonAction
    }
)(Proson)